import {
    StyleSheet,
    ImageBackground,
    Text,
    FlatList,
    ToastAndroid,
    BackHandler,
    View,
    Image,
    Button,
    Modal,
    TextInput,
    ScrollView,
    Dimensions,
    TouchableOpacity,
    PixelRatio,
    Platform,
    Share,
    Animated
} from 'react-native';
import { AntDesign } from '@expo/vector-icons';
import React, { useCallback, useState, useEffect, useLayoutEffect, useRef } from 'react';
import { useFocusEffect } from '@react-navigation/native';
import Swiper from 'react-native-swiper';
import { WebView } from 'react-native-webview';
import { Video, Audio } from 'expo-av';
import Swipeout from 'react-native-swipeout';

const Home = ({ navigation }) => {
    let swipeoutBtns = [
        {
            text: '取消关注',
            onPress: () => { },
            type: 'secondary',//default,delete, primary, secondary
            disabled: false
        },
        {
            component: <Button title='删除' />,
        },
        {
            text: '删除',
            color: '#000',
            backgroundColor: '#ccc',
        },
    ]
    const video = React.useRef(null);
    const [status, setStatus] = React.useState({})
    // useEffect(async ()=>{
    //     const { sound } = await Audio.Sound.createAsync(
    //         require('../assets/renxi.mp3')
    //     );
    //     // setSound(sound);
    //     await sound.playAsync();
    //     navigation.addListener('blur',()=>{
    //         sound.stopAsync();
    //     })
    // },[])
    return <View style={{ flex: 1 }}>


        {/* <Video
            ref={video}
            style={{ height: 300 }}
            source={{
                uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
            }}
            useNativeControls
            resizeMode="contain"
            isLooping
            onPlaybackStatusUpdate={status => {
                setStatus(() => status)
            }
        }
        /> */}
        {/* <Swipeout
            buttonWidth={100}
            right={swipeoutBtns}
        >
            <View style={{
                height: 50,
                paddingLeft: 30,
                justifyContent: 'center'
            }}>
                <Text>Swipe me left</Text>
            </View>
        </Swipeout> */}

        {/* <View style={{ height: 300 }}>
            <Swiper
                style={styles.wrapper}
                showsButtons={true}
                loop={true}
                autoplay={true}
                onIndexChanged={(index) => { }}
                // showsPagination={true}
                // dot={<View></View>}
                dotColor='#000'
                activeDotColor='#f00'
            // activeDotStyle={ {} }
            // nextButton={<Text style={{}}> &gt; </Text>}
            // prevButton={<Text style={{}}> &lt; </Text>}
            >
                <View style={styles.slide}>
                    <Text style={styles.text}>Hello Swiper</Text>
                </View>
                <View style={styles.slide}>
                    <Text style={styles.text}>Beautiful</Text>
                </View>
                <View style={styles.slide}>
                    <Text style={styles.text}>And simple</Text>
                </View>
            </Swiper>
        </View> */}
        {/* <View style={{ height: 300 }}>
            <WebView
                source={{ uri: 'https://www.baidu.com' }}
            />
        </View> */}

    </View>
}

const styles = StyleSheet.create({
    slide: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#ccc'
    }
})

export default Home;